<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

	<ui:composition template="/templates/masterLayout.xhtml">
		<ui:define name="content">

			<p:layout id="banKhuVucLayoutId" style="height: 500px">
				<p:layoutUnit position="west" resizable="false" size="30%" minSize="100" styleClass="noborder">
					<h:form id="banKhuVucFormId">
						<p:tabView id="khuVucTabViewId" value="#{danhSachBanKhuVuc.kvDTOs}" var="kvDTO" style="width:100%;height:100%;">
							<p:tab title="#{kvDTO.khuVuc.name}">
								<p:dataGrid var="ban" value="#{kvDTO.bans}" columns="3">
									<p:commandLink id="banId" action="#{danhSachBanKhuVuc.setSelectedBan(ban)}"
										update=":chiTietPanelId, :chuyenBanFormId, @form">
										<p:graphicImage library="icons"
											name="#{danhSachBanKhuVuc.getDonHang(ban) == null? 'lightbrownCoffee48.png': 'blueCoffee48.png'}"
											style="#{danhSachBanKhuVuc.isSelectedBan(ban)? 'background:gray;' :''}" />
										<br />
										<p:outputLabel value="#{ban.name}" />
									</p:commandLink>
								</p:dataGrid>
								<p:commandButton value="Mở bàn" action="#{danhSachBanKhuVuc.moBan}"
									disabled="#{!danhSachBanKhuVuc.coTheMoBan}" />
								<p:commandButton value="Chuyển bàn" immediate="true" onclick="chuyenBanDialog.show()"
									disabled="#{!danhSachBanKhuVuc.coTheChuyenBan}" />
							</p:tab>
						</p:tabView>
					</h:form>
				</p:layoutUnit>

				<p:layoutUnit position="center" styleClass="noborder">
					<p:panel id="chiTietPanelId">
						<p:outputLabel value="Vui lòng chọn hoặc mở bàn" rendered="#{banHang.donHang == null}" />
						<h:form id="chiTietTableFormId" rendered="#{banHang.donHang != null}">
							<p:dataTable id="chiTietTableId" value="#{banHang.donHang.chiTietDonHangs}" var="chiTietDonHang"
								scrollable="true" scrollHeight="150">

								<f:facet name="header">Đơn hàng bàn #{danhSachBanKhuVuc.selectedBansLabel}</f:facet>

								<p:column width="150" headerText="Name">
									<h:outputText value="#{chiTietDonHang.sanPham.name}" />
								</p:column>

								<p:column width="50" headerText="SL">
									<h:outputText value="#{chiTietDonHang.soLuong}" />
								</p:column>

								<p:column width="70" headerText="Đơn giá">
									<h:outputText value="#{chiTietDonHang.donGia}" />
								</p:column>

								<p:column width="70" headerText="Thành tiền">
									<h:outputText value="#{chiTietDonHang.soLuong * chiTietDonHang.donGia}" />
								</p:column>

								<f:facet name="footer">
                                    Footer
                                </f:facet>
							</p:dataTable>
							<p:remoteCommand name="dialogCallback" update=":banKhuVucLayoutId" />
						</h:form>
						<h:form id="tongCongFormPanelId" rendered="#{banHang.donHang != null}">
							<p:panelGrid id="tongCongPanelId" style="float:right; text-align:right;">
								<p:row>
									<p:column>
										<p:outputLabel value="Tổng cộng: " />
									</p:column>
									<p:column colspan="2">
										<p:outputLabel value="#{banHang.donHang.tongGiaSanPham}" />
									</p:column>
								</p:row>
								<p:row>
									<p:column>
										<p:outputLabel value="Giảm giá: " />
									</p:column>
									<p:column>
										<p:spinner value="#{banHang.donHang.giamGia}" min="0" max="100">
											<p:ajax update="tienGiamGiaId, thanhToanId" process="@this" />
										</p:spinner>
									</p:column>
									<p:column>
										<p:outputLabel id="tienGiamGiaId" value="#{banHang.donHang.tongGiaSanPham*banHang.donHang.giamGia/100}" />
									</p:column>
								</p:row>
								<p:row>
									<p:column>
										<p:outputLabel value="Thanh toán: " />
									</p:column>
									<p:column id="thanhToanId" colspan="2">
										<p:outputLabel value="#{banHang.donHang.tongGiaThanhToan}" />
									</p:column>
								</p:row>
							</p:panelGrid>
							<p:commandButton value="Mở đơn hàng" action="/pages/catalog/banHang" />
							<p:commandButton value="Thanh toán" action="#{danhSachBanKhuVuc.reset}" update=":thanhToanFormId"
								onclick="thanhToanDialog.show()" />
						</h:form>
					</p:panel>
				</p:layoutUnit>
			</p:layout>
			<ui:include src="dialogChuyenBan.xhtml" />
			<ui:include src="/pages/catalog/dialogThanhToan.xhtml"></ui:include>
		</ui:define>
	</ui:composition>
</ui:composition>